<template>
  <div class="ui_portal_title_card">
    <div class="ui_portal_title">
        <div class="title_div">
            <h2>{{ title }}</h2>
            <el-tooltip v-if="isShowTooltip" :content="tooltipContent" placement="right">
                <i class="el-icon-question" />
            </el-tooltip>
        </div>
    </div>
    <div class="card-view-main" :class="viewClass">
        <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '',
        },
        isShowTooltip: {
            type: Boolean,
            default: false,
        },
        tooltipContent: {
            type: String,
            default: '',
        },
        viewClass:{
            type:String,
            default: ''
        },
    }
};
</script>

<style lang="scss" scoped>
.ui_portal_title_card{
    background: #ffffff;
    position: relative;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 12px;
    .ui_portal_title{
        display: flex;
        line-height: 50px;
        padding-left: 16px;
        .title_div{
            display: flex;
            h2{
                font-size: 16px;
                font-weight: 500;
                margin: 0;
            }
            .el-tooltip{
                line-height: 50px;
                color: #666;
                margin-left: 10px;
            }
        }
    }
    .card-view-main{
        padding-bottom: 16px;
    }
}
</style>
